<template>
    <div>
        <el-select style="width: 30%" v-model="province"  @change="choseProvince($event,true)" placeholder="请选择省" >
            <el-option v-for="item in provinceDataList" :key="item.id" :label="item.value" :value="item.id" ></el-option>
        </el-select>
        <el-select  style="width: 30%" v-model="city" @change="choseCity($event,true)" placeholder="请选择市" >
            <el-option v-for="item in getCityArray(province)" :key="item.id" :label="item.value" :value="item.id" ></el-option>
        </el-select>
        <el-select v-if="level===3"  style="width: 30%" v-model="area" placeholder="请选择区"    @change="choseArea($event,true)" >
            <el-option v-for="item in getAreaArray( city )" :key="item.id" :label="item.value" :value="item.id" ></el-option>
        </el-select>
    </div>
</template>
 
<script>
    import provinceCity from "@/assets/map/provinceCity.json";

    export default {
        name: 'li_area_select',
        // model: {
        //     prop: 'caddress',
        //     event: 'change',
        // },
        props: {
            value:{
                type: String,
            },
            level: {
                type: Number,
                default:3
            },
            
        },
        computed: {
            fullName() {
                let a = [];
                a.push(this.areaLabel.province);
                a.push(this.areaLabel.city );
                if( this.level===3){
                    a.push(this.areaLabel.area );
                }

                return  a.join("-");
            }
        },
        data() {
            return {
                province: '',
                city: '',
                area: '',

                areaLabel:{
                    province:'',
                    city:'',
                    area:'',
                },

                provinceDataList: [], //【数据源】---省份数据
                cityDataList: [], //【数据源】---市数据
                areaDataList: [], //【数据源】---区数据

            }
        },
        watch: {
        
            province( val, oldVal ){
                this.choseProvince( val ,false );
                
            },
            city( val, oldVal ){
                this.choseCity( val ,false );
                if(val!=oldVal && this.level===2 ){
                    this.$emit('input', this.city);
                }
            },
            area( val, oldVal ) {
                this.choseArea( val ,false );
                if(val!=oldVal && this.level===3 ){
                    this.$emit('input', this.area);
                    this.$forceUpdate();
                }
            },
            value: {
                handler(newdata, oldName) {
                    this.province = this.value.slice(0,2)+'0000' ;
                    this.city =  this.value.slice(0,4)+'00' ;
                    if(this.level===3){
                        this.area =  this.value.slice(0,6) ;
                    }
                },
                immediate: true, // 一定要加
                deep: true // 一定要加！！！深度监听
            }

        },
        mounted(){

            this.initAreaData();
            
            console.log( this.value );

            if( this.value){
                this.province = this.value.slice(0,2)+'0000' ;
                this.city =  this.value.slice(0,4)+'00' ;
                if(this.level===3){
                    this.area =  this.value.slice(0,6) ;
                }
            }
            
        },
        
        created() {

        },
        methods: {
            

            //选择省份操作
            choseProvince(e, flag) {
                if (flag) {
                    this.city = "";
                    this.area = "";
                }
                // for (var index in this.provinceDataList) {
                //     if (e === this.provinceDataList[index].id) {
                //         //城市、区域数据源赋值
                //         this.cityDataListArray = this.provinceDataList[index].children;
                //     }
                // }

                // 省份文本赋值
                let obj = {};
                obj = this.provinceDataList.find((item)=>{
                    return item.id === e;
                });
                if( obj ){
                    this.province = obj.id;
                    this.areaLabel.province = obj.value;
                }

            },
            //选择城市操作
            choseCity(e, flag) {
                if (flag) {
                    this.area = "";
                }

                // for (var index in this.cityDataList) {
                //     if (e === this.cityDataList[index].id) {
                //         this.areaDataListArray = this.cityDataList[index].children;
                //     }
                // }

                // 城市文本赋值
                let obj = {};
                obj = this.cityDataList.find((item)=>{
                    return item.id === e;
                });
                if(obj){
                    this.city = obj.id;
                    this.areaLabel.city = obj.value;
                }

            },

            //选择区域操作
            choseArea( val , flag) {
                console.log(val);
                // 区域文本赋值
                let obj = {};
                obj = this.areaDataList.find((item)=>{
                    return item.id === val;
                });
                if(obj){
                    this.area = obj.id;
                    this.areaLabel.area = obj.value;
                }
                
            },

            getCityArray(province){
                if(province){
                    for (var index in this.provinceDataList) {
                        if (province === this.provinceDataList[index].id) {
                            //城市、区域数据源赋值
                            return  this.provinceDataList[index].children;
                        }
                    }
                }else{
                    return [];
                }
            },

            getAreaArray( city ){
                if(city){
                    for (var index in this.cityDataList) {
                        if (city === this.cityDataList[index].id) {
                            //城市、区域数据源赋值
                            return  this.cityDataList[index].children;
                        }
                    }
                }else{
                    return [];
                }
            },

            //初始化省市区数据
            initAreaData: function () {
                this.province = "";
                this.city = "";
                this.area = "";
                // 省市区数据分类
                for (var item in provinceCity) {
                    if (item.match(/0000$/)) {
                        //省
                        this.provinceDataList.push({
                            id: item,
                            value: provinceCity[item],
                            children: []
                        });
                    } else if (item.match(/00$/)) {
                        //市
                        this.cityDataList.push({
                            id: item,
                            value: provinceCity[item],
                            children: []
                        });
                    } else {
                        //区
                        this.areaDataList.push({id: item, value: provinceCity[item]});
                    }
                }
                // 分类市级
                for (let i in this.provinceDataList) {
                    for (let j in this.cityDataList) {
                        let provinceObj_ = this.provinceDataList[i];
                        let cityObj_ = this.cityDataList[j];
                        if (provinceObj_.id.slice(0, 2) === cityObj_.id.slice(0, 2)) {
                            provinceObj_.children.push(cityObj_);
                        }
                    }
                }
                // 分类区级
                for (let m in this.cityDataList) {
                    for (let n in this.areaDataList) {
                        let cityObj = this.cityDataList[m];
                        let areaObj = this.areaDataList[n];
                        if (cityObj.id.slice(0, 4) === areaObj.id.slice(0, 4)) {
                            cityObj.children.push(areaObj);
                        }
                    }
                }
            },




        },
        

    }
</script>


<style scoped>

</style>
